/**
 * @desc 酒店设置
 * @author yd_zhaorongjun
 */
<template>
  <div class="gl_contentBox gl_heightFull">
    <div v-if="false" class="gl_row_box gl_mb_15"><i class="iconfont icon_gantanhaoyuan icon_color" style="margin-right:10px" />共有酒店：<span class="icon_color">{{ Api_GET_HotelCountDto.hotelCount || '0' }}</span> 家，房型：<span class="icon_color">{{ Api_GET_HotelCountDto.roomCount || '0' }}</span> 种</div>
    <div class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <el-col :md="6" :lg="3">
          <p>按星级选择</p>
          <el-select v-model="Api_GET_EventsManagementHotelQO.HotelRatingCode" size="mini" placeholder="请选择" filterable @change="refreshList()">
            <el-option v-for="item in dictAll.hotelRating" :key="item.code" :value="item.code" :label="item.value" />
          </el-select>
        </el-col>
        <!-- 按状态 -->
        <el-col :md="6" :lg="3">
          <p>按状态选择</p>
          <el-select v-model="Api_GET_EventsManagementHotelQO.IsLocked" size="mini" placeholder="请选择" filterable @change="refreshList()">
            <el-option value="" label="全部" />
            <el-option :value="false" :label="$t('table.enable')" />
            <el-option :value="true" :label="$t('table.disable')" />
          </el-select>
        </el-col>
        <!-- 按创建人 -->
        <el-col :md="6" :lg="3">
          <p>按创建人选择</p>
          <el-select v-model="Api_GET_EventsManagementHotelQO.CreatorId" size="mini" placeholder="请选择" filterable @change="refreshList()">
            <el-option value="" label="全部" />
            <el-option v-for="item in greatPersonList" :key="item.creatorId" :label="item.creatorName" :value="item.creatorId" />
          </el-select>
        </el-col>
        <!-- 创建时间 -->
        <el-col :md="7" :lg="5" :xl="5">
          <p>创建时间</p>
          <el-date-picker
            v-model="freeDay"
            type="daterange"
            :range-separator="$t('search.to')"
            :start-placeholder="$t('search.placeholder_Date')"
            :end-placeholder="$t('search.placeholder_Date')"
            size="mini"
            value-format="yyyy-MM-dd"
            style="width:100%"
            @change="timeChange"
          />
        </el-col>
        <!-- 酒店名称 -->
        <el-col :md="4" :lg="3">
          <p>酒店名称</p>
          <el-input v-model="Api_GET_EventsManagementHotelQO.Filter" :placeholder="$t('search.placeholder_Name')" size="mini" clearable @change="refreshList()" />
        </el-col>
        <el-col :md="12" :lg="7" :xl="7" style="text-align:right">
          <!-- 查询按钮 -->
          <el-button style="margin-top:27px" type="primary" size="mini" @click="refreshList()">{{ $t('button.query') }}</el-button>
          <!-- 重置按钮 -->
          <el-button style="margin-top:27px" type="warning" size="mini" @click="refreshSearchForm">{{ $t('button.Reset') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <template>
      <el-row style="margin:15px 0 8px 0">
        <!-- 添加酒店按钮 -->
        <el-col :md="6" :lg="4">
          <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="editOfAdd()">添加酒店</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="tableLoading" :data="tableData" class="gl_table_noBorder" size="mini" style="width: 100%;" @expand-change="expandChange">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table v-loading="props.row.tableLoading" :data="props.row.children" class="gl_table_childrenThead" size="mini" style="width: 100%;">
              <el-table-column label="房型图片" align="center" width="160">
                <template slot-scope="{row}">
                  <img class="roomPhoto" :src="getStaticFileUrl(row.imagePath)" alt="" @error="errorPhoto" @mouseenter="showRoomImg(...arguments, row.imagePath)" @mouseleave="hideRoomImg(row.imagePath)">
                </template>
              </el-table-column>
              <el-table-column
                label="房型名称"
                width="200"
              >
                <template slot-scope="{row}">
                  {{ row.name || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                label="床型"
                width="110"
              >
                <template slot-scope="{row}">
                  {{ row.bedType.name }}
                </template>
              </el-table-column>
              <el-table-column
                label="早餐"
                width="110"
              >
                <template slot-scope="{row}">
                  {{ row.breakfastType.name }}
                </template>
              </el-table-column>
              <el-table-column
                label="入住人数"
                width="110"
              >
                <template slot-scope="{row}">
                  {{ row.personCount ? row.personCount + '人' : '--' }}
                </template>
              </el-table-column>
              <el-table-column
                label="建筑面积"
                width="110"
              >
                <template slot-scope="{row}">
                  {{ row.area ? row.area + '平方米' : '--' }}
                </template>
              </el-table-column>
              <el-table-column
                label="窗户"
                width="110"
                align="center"
              >
                <template slot-scope="{row}">
                  {{ row.hasWindow ? "有窗" : '窗' }}
                </template>
              </el-table-column>
              <el-table-column label="状态" align="center" width="120">
                <template slot-scope="{row}">
                  <span v-if="!row.isLocked" class="gl_color_success">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />
                    <span class="gl_pl_5">正常</span>
                  </span>
                  <span v-else class="gl_color_error">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />
                    <span class="gl_pl_5">禁用</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('table.creator')"
                width="120"
              >
                <template slot-scope="{row}">
                  {{ row.creatorName || '--' }}
                </template>
              </el-table-column>
              <!-- 创建时间 -->
              <el-table-column
                label="创建时间"
                align="center"
                width="140"
              >
                <template slot-scope="{row}">
                  <span v-if="row.creationTime">
                    {{ row.creationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('table.actions')" min-width="160">
                <template slot-scope="{row}">
                  <el-button size="mini" type="text" :disabled="props.row.isLocked || row.isLocked" @click="childSaveOrEdit('edit',row, props.row)">编辑</el-button>
                  <el-button size="mini" type="text" :style="props.row.isLocked || row.isLocked ? '' : 'color:#FF3434'" :disabled="props.row.isLocked || row.isLocked" @click="clickDelete(row, props.row)">删除</el-button>
                  <el-button v-if="!row.isLocked" size="mini" type="text" :disabled="props.row.isLocked" :style="props.row.isLocked ? '' : 'color:#FF3434'" @click="childClickEnable(row, true, props.row)">禁用</el-button>
                  <el-button v-else size="mini" type="text" :disabled="props.row.isLocked" @click="childClickEnable(row, false, props.row)">启用</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="酒店图片" align="center" width="70">
          <template slot-scope="{row}">
            <img class="hotelPhoto" :src="getStaticFileUrl(row.imagePath)" alt="" @error="errorPhoto" @mouseenter="showImg(...arguments, row.imagePath)" @mouseleave="hideImg(row.imagePath)">
          </template>
        </el-table-column>
        <el-table-column
          label="酒店名称"
          :tooltip="true"
          width="215"
        >
          <template slot-scope="{row}">
            <el-popover
              placement="top"
              width="380"
              trigger="hover"
              :open-delay="400"
              :content="row.name"
            >
              <div slot="reference" class="gl_ellipsis">{{ row.name || '--' }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="酒店地址"
          :tooltip="true"
          width="215"
        >
          <template slot-scope="{row}">
            <el-popover
              placement="top"
              width="400"
              trigger="hover"
              :open-delay="400"
              :content="row.address"
            >
              <div slot="reference" class="gl_ellipsis">{{ row.address || '--' }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="酒店星级"
          width="140"
          align="center"
        >
          <template slot-scope="{row}">
            <div class="block">
              <el-rate v-model="hotelRatingCode[row.hotelRatingCode]" disabled />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="入住时间"
          width="90"
          align="center"
        >
          <template slot-scope="{row}">
            {{ row.checkInTime ? row.checkInTime + '以后' : '--' }}
          </template>
        </el-table-column>
        <el-table-column
          label="离店时间"
          width="90"
          align="center"
        >
          <template slot-scope="{row}">
            {{ row.checkOutTime ? row.checkOutTime + '以前' : '--' }}
          </template>
        </el-table-column>
        <el-table-column
          label="酒店介绍"
          :tooltip="true"
          min-width="215"
        >
          <template slot-scope="{row}">
            <el-popover
              placement="top"
              width="400"
              trigger="hover"
              :open-delay="400"
              :content="row.description"
            >
              <div slot="reference" class="gl_ellipsis">{{ row.description || '--' }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="90"
        >
          <template slot-scope="{row}">
            <span v-if="!row.isLocked" class="gl_color_success">
              <i class="iconfont icon_state" style="vertical-align: middle;" />
              <span class="gl_pl_5">正常</span>
            </span>
            <span v-else class="gl_color_error">
              <i class="iconfont icon_state" style="vertical-align: middle;" />
              <span class="gl_pl_5">禁用</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.creator')"
          width="100"
        >
          <template slot-scope="{row}">
            {{ row.creatorName || '--' }}
          </template>
        </el-table-column>
        <!-- 创建时间 -->
        <el-table-column
          label="创建时间"
          align="center"
          width="140"
        >
          <template slot-scope="{row}">
            <span v-if="row.creationTime">
              {{ row.creationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
            </span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" width="160">
          <template slot-scope="{row}">
            <el-button size="mini" type="text" :disabled="row.isLocked" @click="editOfAdd(row, 'edit')">编辑</el-button>
            <el-button size="mini" type="text" :disabled="row.isLocked" @click="childSaveOrEdit('add', row)">添加房型</el-button>
            <el-button v-if="!row.isLocked" size="mini" type="text" style="color:#FF3434" @click="clickEnable(row, true)">禁用</el-button>
            <el-button v-else size="mini" type="text" @click="clickEnable(row, false)">启用 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <img v-if="isShowImg && getStaticFileUrl(bigImg)" class="roomBigPhoto" :style="position" :src="getStaticFileUrl(bigImg)" alt="" @error="errorPhoto">
      <img v-if="isShowRoomImg && getStaticFileUrl(bigImg)" class="roomBigPhoto" :style="position" :src="getStaticFileUrl(bigImg)" alt="" @error="errorPhoto">
      <el-row class="gl_pt_20" style="text-align: right;">
        <el-pagination
          :current-page="Api_GET_EventsManagementHotelQO.Page"
          :page-size="Api_GET_EventsManagementHotelQO.MaxResultCount"
          :total="totalPage"
          layout="total,sizes,prev,pager,next,jumper"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
          @current-change="pageIndexChange"
        />
      </el-row>
    </template>
    <edit-hotel ref="editHotel" :dict="dict" :dict-all="dictAll" :district="cache.district" @insert="hotelInsert" @update="hotelUpdate" />
    <add-room ref="addRoom" :dict="dict" :dict-all="dictAll" @insert="roomInsert" @update="roomUpdate" />
  </div>
</template>

<script>

import { mapState, mapActions } from 'vuex';
import defaultHotelImg from '@/assets/images/face_default.png';
import { translateByCode } from '@/lib/getTransData';
import editHotel from './hotel/editHotel';
import addRoom from './hotel/addRoom';
// import { CopyData } from '@/lib';
import { Api_GET_EventsManagementHotelQO, Api_GET_EventsManagementRoomQO, SiSTKWEventsManagementHotelCountDto } from '@/lib/form/game/swaggerForm';
import {
  api_POST_EventsManagementHotel, api_GET_EventsManagementHotel, api_POST_EventsManagementHotelIdSetLocked, api_PUT_EventsManagementHotelId, api_POST_EventsManagementRoom, api_GET_EventsManagementRoom, api_POST_EventsManagementRoomIdSetLocked, api_DELETE_EventsManagementRoomId, api_PUT_EventsManagementRoomId, api_GET_EventsManagementHotelHotelCount, api_GET_EventsManagementHotelCreatorNames
} from '@/extend/api/gameswaggerApi/app.js';
export default {
  name: 'Hotel',
  components: {
    editHotel,
    addRoom
  },
  data() {
    return {
      defaultHotelImg: defaultHotelImg,
      Api_GET_EventsManagementHotelQO: new Api_GET_EventsManagementHotelQO(),
      Api_GET_EventsManagementRoomQO: new Api_GET_EventsManagementRoomQO(),
      Api_GET_HotelCountDto: new SiSTKWEventsManagementHotelCountDto(),
      freeDay: [],
      tableLoading: false,
      totalPage: 0,
      hotelRatingCode: {
        NoneStar: null,
        OneStar: 1,
        TwoStar: 2,
        ThreeStar: 3,
        FourStar: 4,
        FiveStar: 5
      },
      tableData: [],
      provinceList: [], // 地区的下拉列表
      hotelId: '', //
      tableRow: {}, //
      tableRowId: '', //
      tableChildRow: {}, //
      tableChildRowId: '', //
      currentPage: 1,
      editionsList: [],
      greatPersonList: [],
      bigImg: '',
      isShowImg: false,
      isShowRoomImg: false,
      position: {
        left: 0,
        top: 0
      },
      bedList: [],
      timeOut: ''
    };
  },
  computed: {
    ...mapState({
      cache: state => state.dict.cache,
      dict: state => state.dict.dict,
      dictAll: state => state.dict.dictAll
    })
  },
  created() {
    this.getDictByType(['district']);
    this.getDict();
    this.getPickUpCreatorNames();
    this.GetHotelHotelCount();
    this.Api_GET_EventsManagementHotelQO.IsLocked = '';
    this.refreshList();
  },
  methods: {
    ...mapActions({ getDictByType: 'dict/getDictByType', getDict: 'dict/getDict' }),
    // 获取创建人
    getPickUpCreatorNames() {
      api_GET_EventsManagementHotelCreatorNames().then(res => {
        this.greatPersonList = res || [];
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取酒店及房间数量
    GetHotelHotelCount() {
      api_GET_EventsManagementHotelHotelCount().then(res => {
        this.Api_GET_HotelCountDto = res || {};
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 处理列表的床型名称
    getbedTypeName(id) {
      const _name = this.bedList.find(item =>
        item.id === id
      );
      return _name.name;
    },
    // 处理列表的早餐名称
    getBreakfastName(code) {
      const _name = this.dict.breakfastType.find(item =>
        item.code === code
      );
      return _name.value;
    },
    // 刷新列表
    refreshList(page) {
      this.tableLoading = true;
      this.Api_GET_EventsManagementHotelQO.Page = page || 1;
      this.Api_GET_EventsManagementHotelQO.SkipCount = (this.Api_GET_EventsManagementHotelQO.Page - 1) * this.Api_GET_EventsManagementHotelQO.MaxResultCount;
      this.Api_GET_EventsManagementHotelQO.IncludeRoom = true;
      this.Api_GET_EventsManagementHotelQO.IncludeHotelRating = true;
      api_GET_EventsManagementHotel(this.Api_GET_EventsManagementHotelQO).then(res => {
        res.items.map(item => {
          item.children = [];
          item.tableLoading = false;
        });
        this.tableData = res.items;
        this.totalPage = res.totalCount;
        this.tableLoading = false;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 展开事件----动态获取内嵌表数据
    expandChange(row, expandedRows) {
      // 该处是用于判断是展开还是收起行，只有展开的时候做请求，避免多次请求！
      // 展开的时候expandedRows有值，收起的时候为空.HasWindow
      if (expandedRows.length > 0) {
        this.getChildTableData(row);
      }
    },
    // 获取当前酒店所有房间   parentRow是从子table传入的父row
    getChildTableData(row, parentRow) {
      if (parentRow) {
        parentRow.tableLoading = true;
      } else {
        row.tableLoading = true;
      }
      const _id = parentRow ? parentRow.id : row.id;
      this.Api_GET_EventsManagementRoomQO = new Api_GET_EventsManagementRoomQO();
      this.Api_GET_EventsManagementRoomQO.IncludeBedType = true;
      this.Api_GET_EventsManagementRoomQO.IncludeBreakfastType = true;
      this.Api_GET_EventsManagementRoomQO.IsLocked = null;
      this.Api_GET_EventsManagementRoomQO.HasWindow = null;
      this.Api_GET_EventsManagementRoomQO.HotelId = _id;
      api_GET_EventsManagementRoom(this.Api_GET_EventsManagementRoomQO).then(res => {
        // 遍历当前页面表
        this.tableData.forEach((temp, index) => {
          // 找到当前点击的行，把动态获取到的数据赋值进去
          if (temp.id === _id) {
            this.tableData[index].children = res || [];
            this.tableData[index].tableLoading = false;
          }
        });
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
        if (parentRow) {
          parentRow.tableLoading = false;
        } else {
          row.tableLoading = false;
        }
      });
    },
    // 重置搜索表单
    refreshSearchForm() {
      this.Api_GET_EventsManagementHotelQO = new Api_GET_EventsManagementHotelQO();
      this.freeDay = [];
      this.refreshList();
    },
    // 日历选择器给QO赋值
    timeChange(val) {
      if (val instanceof Array) {
        this.Api_GET_EventsManagementHotelQO.MinCreationTime = this.freeDay[0];
        this.Api_GET_EventsManagementHotelQO.MaxCreationTime = this.freeDay[1];
      } else {
        this.Api_GET_EventsManagementHotelQO.MinCreationTime = '';
        this.Api_GET_EventsManagementHotelQO.MaxCreationTime = '';
      }
      this.refreshList(this.Api_GET_EventsManagementHotelQO.Page);
      console.log(this.Api_GET_EventsManagementHotelQO);
    },
    // 添加或修改酒店
    editOfAdd(row, type) {
      this.hotelId = row ? row.id : '';
      this.$refs.editHotel.open(row, type);
    },
    // 添加或修改房型
    childSaveOrEdit(type, row, parentRow) {
      if (parentRow) {
        this.tableRow = parentRow || {};
        this.tableRowId = parentRow.id || '';
        this.tableChildRow = row || {};
        this.tableChildRowId = row.id || '';
      } else {
        this.tableRow = row || {};
        this.tableRowId = row.id || '';
      }
      this.$refs.addRoom.open(row, type);
    },
    // 添加酒店
    hotelInsert(data) {
      const _this = this;
      api_POST_EventsManagementHotel(data).then(res => {
        this.$message({
          // 添加成功！
          message: translateByCode('alert.addSuccessfully'),
          type: 'success'
        });
        _this.$refs.editHotel.dialogVisible = false;
        _this.$refs.editHotel.submitLoading = false;
        _this.refreshList(this.Api_GET_EventsManagementHotelQO.Page);
      }, error => {
        _this.$refs.editHotel.submitLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 修改酒店
    hotelUpdate(data) {
      const _this = this;
      api_PUT_EventsManagementHotelId(this.hotelId, data).then(res => {
        this.$message({
          // 添加成功！
          message: '修改成功！',
          type: 'success'
        });
        _this.$refs.editHotel.dialogVisible = false;
        _this.$refs.editHotel.submitLoading = false;
        _this.refreshList(this.Api_GET_EventsManagementHotelQO.Page);
      }, error => {
        _this.$refs.editHotel.submitLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 添加房型
    roomInsert(data) {
      const _this = this;
      api_POST_EventsManagementRoom(data).then(res => {
        this.$message({
          // 添加成功！
          message: translateByCode('alert.addSuccessfully'),
          type: 'success'
        });
        _this.$refs.addRoom.dialogVisible = false;
        _this.$refs.addRoom.submitLoading = false;
        _this.getChildTableData(_this.tableRow);
      }, error => {
        _this.$refs.addRoom.submitLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 修改房型
    roomUpdate(data) {
      const _this = this;
      api_PUT_EventsManagementRoomId(this.tableChildRowId, data).then(res => {
        this.$message({
          // 添加成功！
          message: translateByCode('alert.editSuccessfully'),
          type: 'success'
        });
        _this.$refs.addRoom.dialogVisible = false;
        _this.$refs.addRoom.submitLoading = false;
        _this.getChildTableData(_this.tableRow);
      }, error => {
        _this.$refs.addRoom.submitLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 启用，禁用按钮 酒店
    clickEnable(row, isValid) {
      const _this = this;
      api_POST_EventsManagementHotelIdSetLocked(row.id, { isLocked: isValid }).then(res => {
        this.$message({
          // 操作成功
          message: '操作成功',
          type: 'success'
        });
        _this.refreshList(this.Api_GET_EventsManagementHotelQO.Page);
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 启用，禁用按钮 房型
    childClickEnable(row, isValid, parentRow) {
      const _this = this;
      console.log(parentRow);
      if (parentRow) {
        parentRow.tableLoading = true;
      } else {
        row.tableLoading = true;
      }
      api_POST_EventsManagementRoomIdSetLocked(row.id, { isLocked: isValid }).then(res => {
        this.$message({
          // 操作成功
          message: '操作成功',
          type: 'success'
        });
        _this.getChildTableData(row, parentRow);
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
        if (parentRow) {
          parentRow.tableLoading = false;
        } else {
          row.tableLoading = false;
        }
      });
    },
    // 删除按钮
    clickDelete(row, parentRow) {
      const _this = this;
      // 您确定要删除 xxx 吗？ zh
      const _confirmStr = ` ${translateByCode('alert.wantDelete')} [ ${row.name} ] ${translateByCode('alert.ma')}`;
      this.$confirm(_confirmStr, translateByCode('alert.warning'), {
        confirmButtonText: translateByCode('alert.confirm'),
        cancelButtonText: translateByCode('alert.cancel'),
        type: 'warning'
      }).then(() => {
        api_DELETE_EventsManagementRoomId(row.id).then(res => {
          this.$message({
            type: 'success',
            // 删除成功！
            message: translateByCode('alert.deleteSuccessfully')
          });
          _this.getChildTableData(row, parentRow);
        }, error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      });
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_EventsManagementHotelQO.MaxResultCount = MaxResultCount;
      this.refreshList();
    },
    pageIndexChange(currentPage) {
      this.refreshList(currentPage);
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultHotelImg;
    },
    showImg(event, img) {
      const _this = this;
      _this.bigImg = img;
      const _img = event.target; // 这里就是获取到的dom元素
      const _position = _img.getBoundingClientRect();
      this.timeOut = setTimeout(() => {
        _this.isShowImg = true;
        this.$set(this.position, 'left', _position.left + 60 + 'px');
        this.$set(this.position, 'top', _position.top + 'px');
      }, 300);
    },
    hideImg(img) {
      const _this = this;
      clearTimeout(this.timeOut);
      _this.isShowImg = false;
    },
    showRoomImg(event, img) {
      const _this = this;
      _this.bigImg = img;
      const _img = event.target; // 这里就是获取到的dom元素
      const _position = _img.getBoundingClientRect();
      console.log(_position);
      this.timeOut = setTimeout(() => {
        _this.isShowRoomImg = true;
        _this.$set(_this.position, 'left', _position.left + 60 + 'px');
        _this.$set(_this.position, 'top', _position.top + 'px');
      }, 300);
      console.log(this.position);
    },
    hideRoomImg() {
      const _this = this;
      clearTimeout(this.timeOut);
      _this.isShowRoomImg = false;
    }
  }
};
</script>
<style lang="scss" scoped>
  .hotelPhoto, .roomPhoto{
    width: 48px;
    height: 36px;
    vertical-align: middle;
  }
  .hotelBigPhoto{
    width: 310px;
    height: 280px;
    position: absolute;
    z-index: 10;
    left: 70px;
  }
  .roomBigPhoto{
    width: 310px;
    height: 280px;
    position: fixed;
    z-index: 10;
  }
  .icon_color {
    color: #1682e6;
  }
</style>
